/*
 * @Author: luoqi
 * @Date: 2022-03-28 12:29:11
 * @LastEditors: luoqi
 * @LastEditTime: 2022-04-02 15:09:45
 * @Description: 
 */
import React from 'react';
import { Menu, Button } from 'antd';
import {
  ReadOutlined,
  VideoCameraOutlined,
  UserSwitchOutlined,
  DesktopOutlined,
  ContainerOutlined,
  UnorderedListOutlined,
  UserOutlined
} from '@ant-design/icons';

import {connect} from 'react-redux'
import {addTab,changeActive} from '../../store/tabAction'
import tabs from '../tabs'

const { SubMenu } = Menu;

const Mysider = (props) => {
  function clickMenu(obj){
    //点击的选项
    let {key}=obj
    //如果标签不存在就添加一个
    if (!props.tabs.panes.find(i => i.key === key)) {
      let tab=tabs[key]
      //添加到panes
      props.addTab(tab)
    }else{
      console.log('已经存在');
    }
    props.changeActive(key)
  }
  return (
    <Menu
      defaultSelectedKeys={['1']}
      defaultOpenKeys={['sub1']}
      mode="inline"
      theme="dark"
      onClick={clickMenu}
    >
      
      <Menu.Item key="home" icon={<DesktopOutlined />}>
        主页
      </Menu.Item>
      <SubMenu key="sub1" icon={<UnorderedListOutlined />} title="疾病管理">
        <Menu.Item key="classify">分类管理</Menu.Item>
        <Menu.Item key="disease">疾病管理</Menu.Item>
      </SubMenu>
      <Menu.Item key="experience" icon={<ContainerOutlined />}>
        经验管理
      </Menu.Item>
      <Menu.Item key="knowledeg" icon={<ReadOutlined />}>
        知识管理
      </Menu.Item>
      <Menu.Item key="video" icon={<VideoCameraOutlined />}>
        视频管理
      </Menu.Item>
      <Menu.Item key="user" icon={<UserSwitchOutlined />}>
        用户管理
      </Menu.Item>
      <Menu.Item key="admin" icon={<UserOutlined />}>
        管理员管理
      </Menu.Item>
    </Menu>
  );
}

//容器组件
export default connect(
  state=>({tabs:state.tabs}),{addTab,changeActive}
)(Mysider);
